<template>
  <div v-if="data[0]">
    <div v-for="item in data[0].Items" :key="item.Id" class="gl_px_15">
      <div class="box gl_mt_15">
        <p>
          <span class="title">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ item.Gender }}</span>
        </p>
        <p>
          <span>证件号：</span>
          <span>{{ item.IdCardNumber }}</span>
        </p>
        <p style="width: 48px; vertical-align: top;" class="inline_block">项 目：</p>
        <div style="width: 80%;" class="inline_block">
          <p v-for="(ktem, kndex) in item.IndividualEvents" :key="kndex">
            <span>{{ ktem.EventLongName || '' }}</span>
            <span v-if="kndex !== item.IndividualEvents.length - 1">；</span>
          </p>
          <p v-for="(ttem, tndex) in item.TeamEvents" :key="tndex">
            <span>{{ ttem.EventLongName || '' }}</span>
            <span v-if="tndex !== item.TeamEvents.length - 1">；</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReportItem',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.box {
  border: 1px solid #ebedf0;
  border-radius: 5px;
  padding: 10px;
  font-size: 12px;
  line-height: 20px;
  color: #666666;
}
.title {
  color: #333333;
  font-size: 14px;
  font-weight: 600;
}
.inline_block{
  display: inline-block;
  line-height: 20px;
}
</style>
